<template>
  <div>
    <el-row :gutter="20" style="width: 90%; margin: 0 auto">
      <el-button
        style="float:right;margin:10px 0;margin-right:50px"
        type="primary"
        v-hasPermi="['userManagement:userDetails:edit']"
        @click="reset"
        >重置密码</el-button
      >
      <el-col :span="24" :offset="0">
        <h4>基本信息</h4>
      </el-col>
      <div class="msgBody">
        <el-col class="msgItem" :span="8" :offset="0">
          用户名:{{ message.userid }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          姓名: {{ message.name }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0">
          手机号:{{ message.tel }}
        </el-col>
        <el-col class="msgItem" :span="8" :offset="0">
          用户类型:{{ message.type }}</el-col
        >
        <el-col class="msgItem" :span="8" :offset="0"> 最后登录时间: </el-col>
      </div>
      <el-col :span="24" :offset="0">
        <h4>购票记录</h4>
      </el-col>
      <div
        class="msgBody"
        v-for="(item, index) in message.orderMainList"
        v-hasPermi="['userManagement:userDetails:edit']"
        :key="index"
      >
        <el-col class="msgItem">
          {{ newDate(item.dotime) }}
          <span style="margin-left:15px">订单:</span>
          <el-button
            class="btn"
            style="background:none;"
            @click="getCode(item.sn)"
            >{{ item.sn }}</el-button
          >
          <!-- <span style="margin-left: 20px">订单{{ item.sn }}</span> -->
          <span v-if="item.status == 0">(已订票)，</span>
          <span v-if="item.status == 1">(已付款)，</span>
          <span v-if="item.status == 2">(已撤票)，</span>
          <span v-if="item.status == 3">(已打票)，</span>
          <span v-if="item.status == 4">(订单成功，客服已申请退款)，</span>
          <span v-if="item.status == 5"
            >(订单成功，退款成功（客服申请退款）)，</span
          >
          <span v-if="item.status == 6">(超时支付，已申请退款)，</span>
          <span v-if="item.status == 7">(超时支付，退款成功)，</span>
          <span v-if="item.status == 8">(订单成功，用户申请退票)，</span>
          <span v-if="item.status == 9"
            >(订单成功，退款成功（用户申请退票）)，</span
          >

          <span> {{ item.target }}-{{ item.terminus }}，</span>
          <span>{{ item.zzs }}张</span>
        </el-col>
      </div>
      <el-col :span="24" :offset="0">
        <h4>操作日志</h4>
      </el-col>
      <div class="msgBody"></div>
      <!-- 回复弹出框 -->
      <el-dialog
        title="重置密码"
        width="500px"
        :visible.sync="dialogVisible"
        style="margin-top: 10%"
      >
        <el-row type="flex" class="row-bg" justify="center">
          <el-col style="margin-left:20px">
            <div class="grid-content bg-purple">
              重置用户登录密码,初始密码为12345678
            </div>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="getSubmits">确定</el-button>
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import { details, resetPwd } from "@/api/userManagement/userDetails";
import utils from "../../js/index";
export default {
  components: {},
  props: [],
  data() {
    return {
      // 用户列表
      tableData: [],
      // 重置按钮框
      dialogVisible: false,
      // 用户id
      userId: "",
      //内容详情
      message: {},
      //订单号
      orderCode: ""
    };
  },
  computed: {},
  created() {
    this.getDetails();
  },
  mounted() {},
  methods: {
    // 用户列表
    getDetails() {
      details({ id: this.$route.query.id }).then(response => {
        if (response.code == 200) {
          this.message = response.data;
        }
      });
    },
    // 重置密码按钮
    reset() {
      this.dialogVisible = true;
    },
    getSubmits() {
      resetPwd({ id: this.$route.query.id }).then(response => {
        if (response.code == 200) {
          this.dialogVisible = false;
          this.$message({
            showClose: true,
            message: "重置成功",
            type: "success"
          });
        }
      });
    },
    // 跳转到订单详情
    getCode(sn) {
      this.$router.push({
        path: "/service/orderMessage",
        query: {
          orderCode: sn
        }
      });
    },
    // 日期格式化
    newDate(date) {
      return utils.utils.NewDate(date);
    }
  }
};
</script>

<style scoped>
.msgItem {
  line-height: 30px;
}
.btn {
  /* width: 170px; */
  padding: 0;
  font-size: 16px;
  border: none;
  color: blue;
}
.btn:hover {
  /* color: red; */
}
</style>
